<template>
  <div class="min-h-screen bg-gray-100 p-8">
    <div class="max-w-6xl mx-auto">
      <h1 class="text-3xl font-bold text-gray-800 mb-8">Ant Design Vue 图标测试</h1>

      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
        <!-- 基础图标 -->
        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="user" size="32" class="text-blue-600 mb-2" />
          <p class="text-sm text-gray-600">User</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="robot" size="32" class="text-purple-600 mb-2" />
          <p class="text-sm text-gray-600">Robot</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="plus" size="32" class="text-green-600 mb-2" />
          <p class="text-sm text-gray-600">Plus</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="send" size="32" class="text-orange-600 mb-2" />
          <p class="text-sm text-gray-600">Send</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="trash" size="32" class="text-red-600 mb-2" />
          <p class="text-sm text-gray-600">Trash</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="copy" size="32" class="text-indigo-600 mb-2" />
          <p class="text-sm text-gray-600">Copy</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="refresh" size="32" class="text-teal-600 mb-2" />
          <p class="text-sm text-gray-600">Refresh</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="dashboard" size="32" class="text-pink-600 mb-2" />
          <p class="text-sm text-gray-600">Dashboard</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="chat" size="32" class="text-yellow-600 mb-2" />
          <p class="text-sm text-gray-600">Chat</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="arrow-down" size="32" class="text-gray-600 mb-2" />
          <p class="text-sm text-gray-600">Arrow Down</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="eye" size="32" class="text-blue-500 mb-2" />
          <p class="text-sm text-gray-600">Eye</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="eye-off" size="32" class="text-gray-500 mb-2" />
          <p class="text-sm text-gray-600">Eye Off</p>
        </div>
      </div>

      <h2 class="text-2xl font-bold text-gray-800 mt-12 mb-6">Toast 图标</h2>
      <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="check-circle" size="32" class="text-green-600 mb-2" />
          <p class="text-sm text-gray-600">Success</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="x-circle" size="32" class="text-red-600 mb-2" />
          <p class="text-sm text-gray-600">Error</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="alert-triangle" size="32" class="text-yellow-600 mb-2" />
          <p class="text-sm text-gray-600">Warning</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="info" size="32" class="text-blue-600 mb-2" />
          <p class="text-sm text-gray-600">Info</p>
        </div>

        <div class="bg-white p-4 rounded-lg shadow text-center">
          <Icon name="bell" size="32" class="text-purple-600 mb-2" />
          <p class="text-sm text-gray-600">Bell</p>
        </div>
      </div>

      <div class="mt-8 text-center">
        <button
          @click="testToast"
          class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
        >
          测试 Toast 通知
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import Icon from '../components/icons/Icon.vue'

export default {
  name: 'Test',
  components: {
    Icon,
  },
  methods: {
    testToast() {
      if (window.$toast) {
        window.$toast.success('这是一个成功消息！')
        setTimeout(() => window.$toast.error('这是一个错误消息！'), 1000)
        setTimeout(() => window.$toast.warning('这是一个警告消息！'), 2000)
        setTimeout(() => window.$toast.info('这是一个信息消息！'), 3000)
      }
    },
  },
}
</script>
